<template>
  <view :class="theme">

    <view class="bg-section b-rounded-16 m-30" style="padding: 30rpx 24rpx; box-shadow: 0 0 10rpx 0 rgba(0,0,0,0.1);">

      <label class="justify-between pb-30" :style="{ borderBottom: `2rpx dashed ${$config.COLOR_GREY}` }">
        <text class="text-26">我的余额</text>
        <text class="color-label text-36 fw-700">{{ userInfo.coin || 0 }}</text>
      </label>

      <view>
        <label class="text-26 mt-60">请选择运营商</label>
        <view class="mt-30 flex-row justify-between">
          <label @click="providers.current !== index && (providers.current = index)"
            v-for="(item, index) in  providers.list" :key="index"
            :style="{ ...(providers.current === index ? { backgroundColor: 'rgba(192, 176, 223, 0.1)', border: `1px solid #c0b0df`, color: $config.COLOR_LABEL } : { backgroundColor: $config.COLOR_BACKGROUND }), width: `200rpx`, height: `90rpx`, }"
            class="justify-center items-center text-26 b-rounded-8">
            {{ item.name }}
          </label>
        </view>
      </view>

      <view class="mt-60">
        <view class="flex-row justify-between">
          <text class="text-26">充值手机号码</text>

          <label @click="changePopup(true, 'rule');">
            <uv-icon size="32" :color="$config.COLOR_PLACEHOLDER" name="info-circle" />
            <text class="ml-10 text-22 color-placeholder">话费充值规则</text>
          </label>
        </view>

        <view class="flex-row mt-30 b-rounded-8 pr-30 items-center bg-base"
          style="height: 90rpx; box-shadow: inset 0 2rpx 6rpx 0 rgba(255,255,255,0.1);">
          <input v-model="phoneNumber" class="flex-1 height-100percent pl-30 pr-30 text-36" type="number" maxlength="11"
            placeholder="请输入手机号码" placeholder-class="color-grey" />
          <uv-icon size="36" :color="$config.COLOR_4" name="account-fill" />
        </view>
      </view>

      <view class="mt-30">
        <view class="flex-row flex-wrap">
          <view v-for="(option, index) in options" :key="index" class="bg-base b-rounded-8 overflow-hidden"
            style="width: calc((100% - 24rpx) / 2); margin: 0 6rpx 30rpx;">
            <view class="relative">
              <uv-image width="100%" height="134" src="/static/img/bg-phoneBill.png" />
              <view class="absolute justify-center p-16" style="top: 0; right: 0; bottom: 0; left: 0;">
                <text class="fw-700 color-base text-36">
                  <text>{{ Number(option.money || 0).toFixed(2) }}</text>
                  <text>元</text>
                </text>
              </view>
            </view>

            <view class="p-16 mt-12 flex-row items-center justify-between">
              <text class="color-stress fw-bold">
                <text class="text-34">{{ option.coin || 0 }}</text>
                <text class="ml-2">龙珠</text>
              </text>
              <button @click="recharge(index)" hover-class="op-[0.6]" class="color-stress text-20 lh-40 b-rounded-20 m-0"
                :style="{ borderColor: $config.COLOR_STRESS }" plain>
                兑换
              </button>
            </view>
          </view>
        </view>
      </view>
    </view>

    <uv-popup :ref="(e: AnyObject) => (showPopup.rule = e)" @input="changePopup($event, 'rule')" mode="center"
      close-icon-color="#8c9ff7">
      <view>
        <view class="items-center">
          <uv-image width="364" height="270" src="/static/img/img-notice.png" />
        </view>
        <view class="justify-between bg-section b-rounded-16"
          style="top: 350rpx; right: 70rpx; bottom: 70rpx; left: 70rpx; width: 600rpx; padding: 150rpx 60rpx 30rpx; margin: -180rpx 0 0;">
          <text class="color-3 fw-600 text-30 text-center">话费充值规则</text>
          <view class="mt-24 color-9 lh-40">
            <text>1、使用本充值服务，每个用户每月充值金额。</text>
            <text>2、充值期间，请勿自己充值或者在其他渠道充值，否则可能产生错误，无法进行售后，请知悉。</text>
            <text>3、若出现充值未到账的情况，请于充值48小时以后联系客服进行售后处理，话费充值售后时间为7天，过期无法售后，请知悉。</text>
          </view>
          <button @click="changePopup(false, 'rule');" style="margin: 70rpx 0 0; line-height: 88rpx;"
            hover-class="op-[0.6]" class="bg-primary b-rounded-16 color-base text-30 fw-600">好的</button>
        </view>
      </view>
    </uv-popup>

    <uv-popup :ref="(e: AnyObject) => (showPopup.notice = e)" mode="center" :closeable="false"
      :close-on-click-overlay="false" close-icon-color="#8c9ff7">
      <view>
        <uv-image class="flex-self-center" width="364" height="270" src="/static/img/img-notice.png" />
        <view class="justify-between bg-section b-rounded-16 text-center"
          style="top: 350rpx; right: 70rpx; bottom: 70rpx; left: 70rpx; width: 600rpx; padding: 150rpx 60rpx 30rpx; margin: -180rpx 0 0;">
          <text class="color-3 fw-600 text-30">工程师正在疯狂的搭建中...</text>
          <text class="mt-24 color-9">敬请期待</text>
          <button @click="uniNavigator({ type: 'navigateBack' })" style="margin: 70rpx 0 0; line-height: 88rpx;"
            hover-class="op-[0.6]" class="bg-primary b-rounded-16 color-base text-30 fw-600">好的</button>
        </view>
      </view>
    </uv-popup>

    <pay-password v-model="password" @finish="submit" ref="passwordPopup" />
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { isPhoneNumber, uniNavigator } from "@/common/libs/utils";
import { onLoad, onNavigationBarButtonTap } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";

const { theme } = useMapState(["theme"]);
const { $config = {} } = getApp().globalData || {};

const providers = reactive({
  list: [
    { name: "中国电信", value: 3 },
    { name: "中国移动", value: 1 },
    { name: "中国联通", value: 2 }
  ],
  current: 0,
});

const userInfo = ref<any>({});
const phoneNumber = ref("");
const showPopup = reactive({
  rule: {} as AnyObject,
  notice: {} as AnyObject
});
const passwordPopup = ref({} as AnyObject);
const password = ref("");

const options = ref<AnyObject[]>([]);

onLoad(async () => {
  await getUserInfo();
  uni.showToast({ icon: "loading" });
  uni.request({
    url: "/rechargeList",
    success({ data }: any) {
      options.value = data;
      uni.hideToast();
    }
  });
});

const getUserInfo = async () => {
  const { data } = await uni.request({
    url: $config.API_USER_INFO_GET,
  });
  userInfo.value = data;
}

let params: AnyObject;
const submit = () => {
  passwordPopup.value.change(false);
  uni.request({
    url: "/phoneRecharge",
    data: {
      ...params,
      phone_type: providers.list[providers.current].value,
      phone: phoneNumber.value,
      pay_pass: password.value
    },
    success({ msg: title }: any) {
      uni.showToast({ title, duration: 1200 });
      setTimeout(uni.navigateBack, 1200);
    }
  });
}

const recharge = (index: number) => {
  if (!isPhoneNumber(phoneNumber.value)) {
    uni.showToast({ title: "手机号码输入有误", icon: "none" });
    return;
  }
  params = { money: options.value[index].money };
  passwordPopup.value.change(true);
}

const changePopup = (e: boolean, popupKey: keyof typeof showPopup) => {
  showPopup[popupKey][e ? "open" : "close"]();
};

</script>

<style lang="scss" scoped>
// scss
::v-deep {
  .uni-sample-toast {
    width: 80%;
  }
}
</style>